Is het mogelijk om de zichtbaarheid van een element te wijzigen met behulp van de functies .hide (), .show () of .toggle ()?
Hoe zou je testen of een element zichtbaar of verborgen is?
2020-12-07 21:51:50
1
2
De volgende
Omdat de vraag naar één element verwijst, is deze code wellicht geschikter:
// Controleert CSS-inhoud voor weergave: [geen | blok], negeert zichtbaarheid: [true | false]
$ (element) .is (": visible");
// Hetzelfde werkt met verborgen
$ (element) .is (": verborgen");
Het is hetzelfde als de suggestie van Twernt, maar dan toegepast op een enkel element; en het komt overeen met het algoritme dat wordt aanbevolen in de jQuery FAQ.
We gebruiken jQuery's is () om het geselecteerde element te controleren met een ander element, selector of een jQuery-object. Deze methode doorloopt de DOM-elementen om een overeenkomst te vinden die voldoet aan de doorgegeven parameter. Het zal true retourneren als er een overeenkomst is, anders false retourneren.
|
U kunt de verborgen selector gebruiken:
// Komt overeen met alle elementen die verborgen zijn
$ ('element: hidden')
En de zichtbare selector:
// Komt overeen met alle elementen die zichtbaar zijn
$ ('element: visible')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("zichtbaarheid") == "verborgen") {
// 'element' is verborgen
}
De bovenstaande methode houdt geen rekening met de zichtbaarheid van de ouder. Om ook rekening te houden met de ouder, moet u .is (": hidden") of .is (": visible") gebruiken.
Bijvoorbeeld,
Div2
De bovenstaande methode beschouwt div2 als zichtbaar terwijl: zichtbaar niet. Maar het bovenstaande kan in veel gevallen nuttig zijn, vooral wanneer u moet zien of er een fout-divs zichtbaar is in de verborgen ouder, omdat in dergelijke omstandigheden: visible niet zal werken.
|
Geen van deze antwoorden gaat in op wat ik begrijp als de vraag, waarnaar ik zocht: "Hoe ga ik om met items die zichtbaar zijn: verborgen?". Noch: visible noch: hidden zal dit aan, aangezien ze allebei op zoek zijn naar weergave volgens de documentatie. Voor zover ik kon bepalen, is er geen selector om CSS-zichtbaarheid te verwerken. Hier is hoe ik het heb opgelost (standaard jQuery-selectors, er kan een meer beknopte syntaxis zijn):
$ (". item"). each (function () {
if ($ (this) .css ("zichtbaarheid") == "verborgen") {
// omgaan met niet-zichtbare staat
} anders {
// omgaan met zichtbare staat
}
});
|
Van Hoe bepaal ik de status van een geschakeld element?
U kunt bepalen of een element is samengevouwen of niet door de: visible en: hidden selectors te gebruiken.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Als u simpelweg handelt op basis van de zichtbaarheid van een element, kunt u gewoon het volgende opnemen: visible of: hidden in de selector-expressie. Bijvoorbeeld:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'slow');
|
Als je controleert of iets zichtbaar is of niet, ga je vaak meteen door en doe je er iets anders mee. jQuery-chaining maakt dit gemakkelijk.
Dus als u een selector heeft en u wilt er alleen een actie op uitvoeren als deze zichtbaar of verborgen is, kunt u filter (": visible") of filter (": hidden") gebruiken, gevolgd door deze te koppelen aan de actie die u wilt nemen.
Dus in plaats van een if-statement, zoals dit:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Verberg knop
}
Of efficiënter, maar nog lelijker:
var button = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({breedte: "toggle"}); // Verberg knop
}
Je kunt het allemaal op één regel doen:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
De: zichtbare selector volgens de jQuery-documentatie:
Ze hebben een CSS-weergavewaarde van geen.
Het zijn formulierelementen met type = "verborgen".
Hun breedte en hoogte zijn expliciet ingesteld op 0.
Een voorouderelement is verborgen, dus het element wordt niet op de pagina weergegeven.
Elementen met zichtbaarheid: verborgen of ondoorzichtigheid: 0 worden als zichtbaar beschouwd, aangezien ze nog steeds ruimte innemen in de lay-out.
Dit is in sommige gevallen nuttig en in andere gevallen nutteloos, want als je wilt controleren of het element zichtbaar is (display! = None) en de zichtbaarheid van de ouders negeert, zul je merken dat het doen van .css ("display") == 'none 'is niet alleen sneller, maar geeft ook de zichtbaarheidscontrole correct terug.
Als u de zichtbaarheid in plaats van de weergave wilt controleren, moet u: .css ("zichtbaarheid") == "verborgen" gebruiken.
Houd ook rekening met de aanvullende jQuery-opmerkingen:
Omdat: visible een jQuery-extensie is en geen deel uitmaakt van de CSS-specificatie, kunnen query's met: visible geen gebruik maken van de prestatieverbetering die wordt geboden door de native DOM-methode querySelectorAll (). Om de beste prestaties te bereiken bij het gebruik van: visible om elementen te selecteren, selecteert u eerst de elementen met een pure CSS-selector en gebruikt u vervolgens .filter (": visible").
Als je je zorgen maakt over de prestaties, moet je Now you see me… show / hide performance (2010-05-04) aanvinken. En gebruik andere methoden om elementen weer te geven en te verbergen.
|
Dit werkt voor mij, en ik gebruik show () en hide () om mijn div verborgen / zichtbaar te maken:
if ($ (this) .css ('display') == 'none') {
/ * uw code komt hier * /
} anders {
/ * alternatieve logica * /
}
|
Hoe elementzichtbaarheid en jQuery werken;
Een element kan worden verborgen met weergave: geen,zichtbaarheid: verborgen of ondoorzichtigheid: 0. Het verschil tussen die methoden:
weergave: geen verbergt het element en neemt geen ruimte in beslag;
zichtbaarheid: verborgen verbergt het element, maar neemt nog steeds ruimte in beslag in de lay-out;
opacity: 0 verbergt het element als "zichtbaarheid: verborgen", en het neemt nog steeds ruimte in beslag in de layout; het enige verschil is dat ondoorzichtigheid iemand in staat stelt een element gedeeltelijk transparant te maken;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} anders {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} anders {
$ ('. target'). show ();
}
if ($ ('. doel-zichtbaarheid'). css ('zichtbaarheid') == 'verborgen') {
$ ('. doelzichtbaarheid'). css ({
zichtbaarheid: "zichtbaar",
Scherm: ""
});
} anders {
$ ('. doelzichtbaarheid'). css ({
zichtbaarheid: "verborgen",
Scherm: ""
});
}
if ($ ('. target-Visibility'). css ('opacity') == "0") {
$ ('. doelzichtbaarheid'). css ({
dekking: "1",
Scherm: ""
});
} anders {
$ ('. doelzichtbaarheid'). css ({
dekking: "0",
Scherm: ""
});
}
Handige jQuery-schakelingsmethoden:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
U kunt dit ook doen met gewoon JavaScript:
functie isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
terugkeer waar;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["zichtbaarheid"]! = "verborgen") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("zichtbaarheid")! = "verborgen") {
return isRendered (domObj.parentNode);
}
}
teruggeven false;
}
Opmerkingen:
Werkt overal
Werkt voor geneste elementen
Werkt voor CSS en inline-stijlen
Heeft geen kader nodig
|
Ik zou CSS-klasse .hide {display: none! Important; }.
Om te verbergen / tonen, roep ik .addClass ("hide") /. RemoveClass ("hide"). Om de zichtbaarheid te controleren, gebruik ik .hasClass ("hide").
Het is een eenvoudige en duidelijke manier om elementen te controleren / verbergen / tonen, als u niet van plan bent .toggle () of .animate () methoden te gebruiken.
|
Demolink
$ ('# clickme'). click (function () {
$ ('# boek'). toggle ('slow', function () {
// Animatie voltooid.
alert ($ ('# boek'). is (": visible")); // <--- TRUE if Visible False if Hidden
});
});
Klik hier
Bron:
Blogger Plug n Play - jQuery-tools en -widgets: zien of een element verborgen of zichtbaar is met jQuery
|
Men kan eenvoudig het verborgen of zichtbare attribuut gebruiken, zoals:
$ ('element: hidden')
$ ('element: visible')
Of u kunt hetzelfde vereenvoudigen met als volgt.
$ (element) .is (": visible")
|
ebdiv moet worden ingesteld op style = "display: none;". Het werkt voor zowel tonen als verbergen:
$ (document) .ready (functie () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Een ander antwoord waarmee u rekening moet houden, is dat als u een element verbergt, u jQuery zou moeten gebruiken, maar in plaats van het daadwerkelijk te verbergen, verwijdert u het hele element, maar kopieert u de HTML-inhoud en de tag zelf naar een jQuery-variabele, en dan het enige wat je hoeft te doen is testen of er zo'n tag op het scherm staat, met de normale if (! $ ('# thetagname'). length).
|
Bij het testen van een element tegen: verborgen selector in jQuery moet er rekening mee worden gehouden dat een absoluut gepositioneerd element kan worden herkend als verborgen, hoewel hun onderliggende elementen zichtbaar zijn.
Dit lijkt in de eerste plaats enigszins contra-intuïtief - hoewel het nader bekijken van de jQuery-documentatie de relevante informatie geeft:
Elementen kunnen om verschillende redenen als verborgen worden beschouwd: [...] Hun breedte en hoogte zijn expliciet ingesteld op 0. [...]
Dus dit is eigenlijk logisch met betrekking tot het box-model en de berekende stijl voor het element. Zelfs als breedte en hoogte niet expliciet op 0 zijn ingesteld, kunnen ze impliciet worden ingesteld.
Bekijk het volgende voorbeeld eens:
console.log ($ ('. foo'). is (': hidden')); // waar
console.log ($ ('. bar'). is (': hidden')); // false
.foo {
positie: absoluut;
links: 10px;
boven: 10px;
achtergrond: # ff0000;
}
.bar {
positie: absoluut;
links: 10px;
boven: 10px;
breedte: 20px;
hoogte: 20px;
achtergrond: # 0000ff;
}
Update voor jQuery 3.x:
Met jQuery 3 zal het beschreven gedrag veranderen! Elementen worden als zichtbaar beschouwd als ze lay-outvakken hebben, inclusief die met een breedte en / of hoogte van nul.
JSFiddle met jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Dezelfde JavaScript-code heeft dan deze uitvoer:
console.log ($ ('. foo'). is (': hidden')); // false
console.log ($ ('. bar'). is (': hidden'));// false
|
Dit kan werken:
verwachten ($ ("# message_div"). css ("display")). toBe ("none");
|
Voorbeeld:
$ (document) .ready (functie () {
if ($ ("# checkme: hidden"). length) {
console.log ('Verborgen');
}
});
Categorie: Vis
Product: Atlantische zalm
Soort: Salmo salar
Vorm: Steaks
|
Om te controleren of het niet zichtbaar is, gebruik ik!:
if (! $ ('# boek'). is (': visible')) {
alert ('# boek is niet zichtbaar')
}
Of het volgende is ook hetzelfde, waarbij de jQuery-selector in een variabele wordt opgeslagen voor betere prestaties wanneer u deze meerdere keren nodig hebt:
var $ book = $ ('# boek')
if (! $ book.is (': visible')) {
alert ('# boek is niet zichtbaar')
}
|
Gebruik omschakelen tussen klassen, niet het bewerken van stijlen. . .
Het gebruik van klassen die zijn aangewezen om elementen te "verbergen", is eenvoudig en ook een van de meest efficiënte methoden. Het omschakelen van een klasse 'verborgen' met een weergavestijl van 'geen' werkt sneller dan het rechtstreeks bewerken van die stijl. Ik heb een deel hiervan behoorlijk grondig uitgelegd in Stack Overflow-vraag Twee elementen zichtbaar / verborgen in dezelfde div.
Praktische tips en optimalisatie voor JavaScript
Hier is een echt verhelderende video van een Google Tech Talk door Google front-end engineer Nicholas Zakas:
Versnel uw Javascript (YouTube)
|
Voorbeeld van het gebruik van de zichtbare controle voor adblocker is geactiveerd:
$ (document) .ready (functie () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Schakel adblocker uit."). show ();
});
"ablockercheck" is een ID die adblocker blokkeert. Dus als je het controleert of het zichtbaar is, kun je detecteren of adblocker is ingeschakeld.
|
Geen enkel voorbeeld past tenslotte bij mij, dus schreef ik mijn eigen.
Tests (geen ondersteuning van Internet Explorer-filter: alfa):
a) Controleer of het document niet verborgen is
b) Controleer of een element breedte / hoogte / dekking nul heeft of weergave: geen / zichtbaarheid: verborgen in inline stijlen
c) Controleer of het midden (ook omdat het sneller is dan het testen van elke pixel / hoek) van het element niet wordt verborgen door een ander element (en alle voorouders, bijvoorbeeld: overflow: verborgen / scroll / het ene element over het andere) of schermranden
d) Controleer of een element breedte / hoogte / dekking nul heeft of weergave: geen / zichtbaarheid: verborgen in berekende stijlen (onder alle voorouders)
Getest op
Android 4.4 (eigen browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (documentmodi Internet Explorer 5-11 + Internet Explorer 8 op een virtuele machine) en Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relatieve = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
functie binnen (kind, ouder) {
while (kind) {
if (kind === ouder) retourneert waar;
child = child.parentNode;
}
teruggeven false;
};
retourfunctie (elem) {
als (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'verborgen' ||
elem.style.display == 'geen' ||
elem.style.opacity === 0
) terug onwaar;
var rect = elem.getBoundingClientRect ();
if (relatief) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} anders als (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
recht.links + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) terug onwaar;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
terwijl (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (type comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
terugkeer waar;
}
}) ();
Hoe te gebruiken:
is_visible (elem) // boolean
|
U moet beide controleren ... Weergave en zichtbaarheid:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "verborgen") {
// Het element is niet zichtbaar
} anders {
// Het element is zichtbaar
}
Als we $ (this) .is (": visible") controleren, controleert jQuery beide dingen automatisch.
|
Misschien kun je zoiets als dit doen
$ (document) .ready (functie () {
var zichtbaar =$ ('# tElement'). is (': visible');
if (zichtbaar) {
alert ("zichtbaar");
// Code
}
anders
{
alert ("verborgen");
}
});
Voornaam
|
Controleer eenvoudig de zichtbaarheid door te controleren op een booleaanse waarde, zoals:
if (this.hidden === false) {
// Jouw code
}
Ik heb deze code voor elke functie gebruikt. Anders kun je is (': visible') gebruiken om de zichtbaarheid van een element te controleren.
|
Omdat Elementen met zichtbaarheid: verborgen of ondoorzichtigheid: 0 als zichtbaar worden beschouwd, aangezien ze nog steeds ruimte innemen in de lay-out (zoals beschreven voor jQuery: zichtbare Selector) - kunnen we op deze manier controleren of het element echt zichtbaar is:
functie isElementReallyHidden (el) {
retourneer $ (el) .is (": hidden") || $ (el) .css ("zichtbaarheid") == "verborgen" || $ (el) .css ('opacity') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Maar wat als de CSS van het element er als volgt uitziet?
.element{
positie: absoluut; links: -9999;
}
Dus dit antwoord op Stack Overflow-vraag Hoe te controleren of een element buiten het scherm is, moet ook worden overwogen.
|
Er kan een functie worden gemaakt om te controleren op zichtbaarheid / weergave-attributen om te meten of het element wordt weergegeven in de gebruikersinterface of niet.
functie checkUIElementVisible (element) {
return ((element.css ('display')! == 'geen') && (element.css ('zichtbaarheid')! == 'verborgen'));
}
Werkende viool
|
Hier is ook een ternaire voorwaardelijke uitdrukking om de staat van het element te controleren en vervolgens om te schakelen:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' slow ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} anders {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
De volgende
Zeer actieve vraag. Verdien 10 reputatie om deze vraag te beantwoorden. De reputatievereiste helpt deze vraag te beschermen tegen spam en niet-beantwoording.
Niet het antwoord waar je naar zoekt? Blader door andere vragen met de tag javascript jQuery dom zichtbaarheid of stel uw eigen vraag.
Bron:
Blogger Plug n Play - jQuery-tools en -widgets: zien of een element verborgen of zichtbaar is met jQuery
|
Men kan eenvoudig het verborgen of zichtbare attribuut gebruiken, zoals:
$ ('element: hidden')
$ ('element: visible')
Of u kunt hetzelfde vereenvoudigen met als volgt.
$ (element) .is (": visible")
|
ebdiv moet worden ingesteld op style = "display: none;". Het werkt voor zowel tonen als verbergen:
$ (document) .ready (functie () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Een ander antwoord waarmee u rekening moet houden, is dat als u een element verbergt, u jQuery zou moeten gebruiken, maar in plaats van het daadwerkelijk te verbergen, verwijdert u het hele element, maar kopieert u de HTML-inhoud en de tag zelf naar een jQuery-variabele, en dan het enige wat je hoeft te doen is testen of er zo'n tag op het scherm staat, met de normale if (! $ ('# thetagname'). length).
|
Bij het testen van een element tegen: verborgen selector in jQuery moet er rekening mee worden gehouden dat een absoluut gepositioneerd element kan worden herkend als verborgen, hoewel hun onderliggende elementen zichtbaar zijn.
Dit lijkt in de eerste plaats enigszins contra-intuïtief - hoewel het nader bekijken van de jQuery-documentatie de relevante informatie geeft:
Elementen kunnen om verschillende redenen als verborgen worden beschouwd: [...] Hun breedte en hoogte zijn expliciet ingesteld op 0. [...]
Dus dit is eigenlijk logisch met betrekking tot het box-model en de berekende stijl voor het element. Zelfs als breedte en hoogte niet expliciet op 0 zijn ingesteld, kunnen ze impliciet worden ingesteld.
Bekijk het volgende voorbeeld eens:
console.log ($ ('. foo'). is (': hidden')); // waar
console.log ($ ('. bar'). is (': hidden')); // false
.foo {
positie: absoluut;
links: 10px;
boven: 10px;
achtergrond: # ff0000;
}
.bar {
positie: absoluut;
links: 10px;
boven: 10px;
breedte: 20px;
hoogte: 20px;
achtergrond: # 0000ff;
}
Update voor jQuery 3.x:
Met jQuery 3 zal het beschreven gedrag veranderen! Elementen worden als zichtbaar beschouwd als ze lay-outvakken hebben, inclusief die met een breedte en / of hoogte van nul.
JSFiddle met jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Dezelfde JavaScript-code heeft dan deze uitvoer:
console.log ($ ('. foo'). is (': hidden')); // false
console.log ($ ('. bar'). is (': hidden'));// false
|
Dit kan werken:
verwachten ($ ("# message_div"). css ("display")). toBe ("none");
|
Voorbeeld:
$ (document) .ready (functie () {
if ($ ("# checkme: hidden"). length) {
console.log ('Verborgen');
}
});
|
Om te controleren of het niet zichtbaar is, gebruik ik!:
if (! $ ('# boek'). is (': visible')) {
alert ('# boek is niet zichtbaar')
}
Of het volgende is ook hetzelfde, waarbij de jQuery-selector in een variabele wordt opgeslagen voor betere prestaties wanneer u deze meerdere keren nodig hebt:
var $ book = $ ('# boek')
if (! $ book.is (': visible')) {
alert ('# boek is niet zichtbaar')
}
|
Gebruik omschakelen tussen klassen, niet het bewerken van stijlen. . .
Het gebruik van klassen die zijn aangewezen om elementen te "verbergen", is eenvoudig en ook een van de meest efficiënte methoden. Het omschakelen van een klasse 'verborgen' met een weergavestijl van 'geen' werkt sneller dan het rechtstreeks bewerken van die stijl. Ik heb een deel hiervan behoorlijk grondig uitgelegd in Stack Overflow-vraag Twee elementen zichtbaar / verborgen in dezelfde div.
Praktische tips en optimalisatie voor JavaScript
Hier is een echt verhelderende video van een Google Tech Talk door Google front-end engineer Nicholas Zakas:
Versnel uw Javascript (YouTube)
|
Voorbeeld van het gebruik van de zichtbare controle voor adblocker is geactiveerd:
$ (document) .ready (functie () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Schakel adblocker uit."). show ();
});
"ablockercheck" is een ID die adblocker blokkeert. Dus als je het controleert of het zichtbaar is, kun je detecteren of adblocker is ingeschakeld.
|
Geen enkel voorbeeld past tenslotte bij mij, dus schreef ik mijn eigen.
Tests (geen ondersteuning van Internet Explorer-filter: alfa):
a) Controleer of het document niet verborgen is
b) Controleer of een element breedte / hoogte / dekking nul heeft of weergave: geen / zichtbaarheid: verborgen in inline stijlen
c) Controleer of het midden (ook omdat het sneller is dan het testen van elke pixel / hoek) van het element niet wordt verborgen door een ander element (en alle voorouders, bijvoorbeeld: overflow: verborgen / scroll / het ene element over het andere) of schermranden
d) Controleer of een element breedte / hoogte / dekking nul heeft of weergave: geen / zichtbaarheid: verborgen in berekende stijlen (onder alle voorouders)
Getest op
Android 4.4 (eigen browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (documentmodi Internet Explorer 5-11 + Internet Explorer 8 op een virtuele machine) en Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relatieve = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
functie binnen (kind, ouder) {
while (kind) {
if (kind === ouder) retourneert waar;
child = child.parentNode;
}
teruggeven false;
};
retourfunctie (elem) {
als (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'verborgen' ||
elem.style.display == 'geen' ||
elem.style.opacity === 0
) terug onwaar;
var rect = elem.getBoundingClientRect ();
if (relatief) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} anders als (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
recht.links + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) terug onwaar;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
terwijl (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (type comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
terugkeer waar;
}
}) ();
Hoe te gebruiken:
is_visible (elem) // boolean
|
U moet beide controleren ... Weergave en zichtbaarheid:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "verborgen") {
// Het element is niet zichtbaar
} anders {
// Het element is zichtbaar
}
Als we $ (this) .is (": visible") controleren, controleert jQuery beide dingen automatisch.
|
Misschien kun je zoiets als dit doen
$ (document) .ready (functie () {
var zichtbaar =$ ('# tElement'). is (': visible');
if (zichtbaar) {
alert ("zichtbaar");
// Code
}
anders
{
alert ("verborgen");
}
});
Voornaam
|
Controleer eenvoudig de zichtbaarheid door te controleren op een booleaanse waarde, zoals:
if (this.hidden === false) {
// Jouw code
}
Ik heb deze code voor elke functie gebruikt. Anders kun je is (': visible') gebruiken om de zichtbaarheid van een element te controleren.
|
Omdat Elementen met zichtbaarheid: verborgen of ondoorzichtigheid: 0 als zichtbaar worden beschouwd, aangezien ze nog steeds ruimte innemen in de lay-out (zoals beschreven voor jQuery: zichtbare Selector) - kunnen we op deze manier controleren of het element echt zichtbaar is:
functie isElementReallyHidden (el) {
retourneer $ (el) .is (": hidden") || $ (el) .css ("zichtbaarheid") == "verborgen" || $ (el) .css ('opacity') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Maar wat als de CSS van het element er als volgt uitziet?
.element{
positie: absoluut; links: -9999;
}
Dus dit antwoord op Stack Overflow-vraag Hoe te controleren of een element buiten het scherm is, moet ook worden overwogen.
|
Er kan een functie worden gemaakt om te controleren op zichtbaarheid / weergave-attributen om te meten of het element wordt weergegeven in de gebruikersinterface of niet.
functie checkUIElementVisible (element) {
return ((element.css ('display')! == 'geen') && (element.css ('zichtbaarheid')! == 'verborgen'));
}
Werkende viool
|
Hier is ook een ternaire voorwaardelijke uitdrukking om de staat van het element te controleren en vervolgens om te schakelen:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' slow ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} anders {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
De volgende
Zeer actieve vraag. Verdien 10 reputatie om deze vraag te beantwoorden. De reputatievereiste helpt deze vraag te beschermen tegen spam en niet-beantwoording.
Niet het antwoord waar je naar zoekt? Blader door andere vragen met de tag javascript jQuery dom zichtbaarheid of stel uw eigen vraag.